import React, { PureComponent, useCallback, useEffect } from 'react';
import { ConfigProvider } from 'antd';
import { HashRouter, Switch } from 'react-router-dom';
// import { Helmet } from 'react-helmet';
// import { Provider } from 'react-redux';
import RouterView from '@/router';
import routes from '@/router/router';
import { connect } from 'react-redux';
import theme from '@/theme.module.less';
import zhCN from 'antd/lib/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn'; // 解决antd日期相关组件国际化问题
import { RootState } from '@/store';
import { setGlobalItem } from '@/store/features/globalSlice';
import './App.less';
import { Dispatch } from '@reduxjs/toolkit';

// 设置语言
moment.locale('zh-cn');

// 设置 Modal、Message、Notification rootPrefixCls。
ConfigProvider.config({
  prefixCls: theme.antPrefix,
});

class App extends PureComponent<any> {
  componentDidMount() {
    if (window.__POWERED_BY_QIANKUN__ && this.props.onGlobalStateChange) {
      this.props.onGlobalStateChange((state: any, prev: any) => {
        console.log('状态变更前后11', state, prev);
        this.props.setGlobalItem(state);
      });
    }
  }

  render(): React.ReactNode {
    return (
      <ConfigProvider locale={zhCN} prefixCls={theme.antPrefix}>
        <HashRouter>
          <Switch>
            <RouterView routes={routes}></RouterView>
          </Switch>
        </HashRouter>
      </ConfigProvider>
    );
  }
}

const mapStateToProps = (state: RootState) => {
  return {
    globalItem: state.global.globalItem,
  };
};

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    setGlobalItem(state: RootState) {
      dispatch(setGlobalItem(state));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
